import React, { Component } from 'react';
import { Carousel } from 'antd-mobile';

import { withRouter } from 'react-router-dom'

// 引入图片
import swiper1 from '@/assets/image/swiper-1.png';
/* import swiper2 from '@/assets/image/swiper-2.png';
import swiper3 from '@/assets/image/swiper-3.png'; */

import connect from './connect'

@connect
@withRouter
class Swiper extends Component {
    state = {
        // data: [swiper1, swiper2, swiper3],
        imgHeight: 176
    }
    render() {
        return (
            <>
                <Carousel
                    autoplay={true}
                    infinite
                >
                    {
                        // 条件判断
                        this.props.swiper.length > 0
                            ?
                            this.props.swiper.map((item) => (
                                <img
                                    key={"swiper-" + item.id}
                                    src={item.img}
                                    alt=""
                                    style={{ width: '100%', verticalAlign: 'top' }}
                                    onLoad={() => {
                                        window.dispatchEvent(new Event('resize'));
                                        this.setState({ imgHeight: 'auto' });
                                    }
                                    }
                                />
                            ))
                            :
                            <img src={swiper1} alt="" style={{ width: '100%', verticalAlign: 'top' }} />
                    }
                </Carousel>
            </>
        );
    }
}

export default Swiper;
